<template>
  <div id="app" class="father">
    <!--头部订单详情-->
    <el-form :inline="true" :model="Newcar" class="demo-form-inline formed">
      <el-row>
        <el-col :span="24">
          <div class="grid-content bg-purple-dark Newcar">
            <el-form-item v-model="Newcar.orderType"
              >预约新车上牌服务</el-form-item
            >
          </div>
        </el-col>
      </el-row>
      <!--内容-->
      <div class="grid-content bg-purple">
        <!--左表单-->
        <el-row :gutter="20">
          <el-col :span="12" class="menued">
            <el-form
              :inline="true"
              :model="formInline"
              class="demo-form-inline formed"
              :label-position="labelposition"
              label-width="110px"
            >
              <el-form-item :required="true" label="联系人:">
                <el-input v-model="formInline.safeorderUser"></el-input>
              </el-form-item>
              <el-form-item :required="true" label="联系电话:">
                <el-input v-model="formInline.safeorderUserphone"></el-input>
              </el-form-item>
              <el-form-item :required="true" label="车牌号:">
                <el-input v-model="formInline.safeorderCarnumber"></el-input>
              </el-form-item>
              <el-form-item :required="true" label="检测场:">
                <el-select v-model="formInline.area" placeholder="选择区域">
                  <el-option
                    v-for="(item, index) in area"
                    :label="item.driver_area"
                    :value="item.driver_area"
                    :key="index"
                  ></el-option>
                </el-select>
                <el-select
                  v-model="formInline.safeorderCheckshop"
                  placeholder="请选择检测场"
                >
                  <el-option label="成华区" value="chenghuaqu"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item :required="true" label="客户备注:">
                <el-input v-model="formInline.safeorderUsernote"></el-input>
              </el-form-item>
              <el-form-item :required="true" label="拍照内容:">
                <el-input
                  v-model="formInline.safeorderUserimage"
                  placeholder="行驶证，交强险保单（并上传海涛微信）收取：行驶证"
                ></el-input>
              </el-form-item>
              <div class="grid-content bg-purple">
                <el-form-item :required="true" label="上传证件图片:">
                  <!--图片附件-->
                  <el-upload
                    class="upload-demo"
                    accept="image/jpeg,image/jpg,image/png"
                    name="file"
                    ref="img"
                    :action="imgUpload"
                    :file-list="fileListUser"
                    :on-success="handleSuccess"
                    list-type="picture-card"
                  >
                    <i slot="default" class="el-icon-plus"></i>
                    <div slot="file" slot-scope="{ file }">
                      <img
                        class="el-upload-list__item-thumbnail"
                        :src="file.url"
                        alt=""
                      />
                      <span class="el-upload-list__item-actions">
                        <span
                          class="el-upload-list__item-preview"
                          @click="handlePictureCardPreview"
                        >
                          <i class="el-icon-zoom-in"></i>
                        </span>
                      </span>
                    </div>
                    <div slot="tip" class="el-upload__tip">
                      只能上传jpg/png文件，且不超过500kb
                    </div>
                  </el-upload>
                  <el-dialog :visible.sync="dialogVisible">
                    <img width="100%" :src="imageUrl" alt="" />
                  </el-dialog>
                </el-form-item>
              </div>
            </el-form>
          </el-col>
          <!--右表单-->
          <el-col :span="12" class="menued">
            <el-form
              :inline="true"
              class="demo-form-inline formed"
              :label-position="labelposition"
              label-width="110px"
            >
              <el-form-item label="选择接车司机:">
                <!--取证司机区域下拉-->
                <el-select
                  v-model="formInline.send"
                  placeholder="选择区域"
                  @change="senddriver"
                >
                  <el-option
                    v-for="(item, index) in sendarea"
                    :label="item.driver_area"
                    :key="index"
                    :value="item.driver_area"
                  ></el-option>
                </el-select>
                <!--还证司机名字下拉-->
                <el-select
                  v-model="formInline.senddriverName"
                  placeholder="接车司机"
                >
                  <el-option
                    v-for="(item, index) in senddrives"
                    :label="item.driver_name"
                    :value="item.driver_name"
                    :key="index"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item :required="true" label="派工单位:">
                <el-select v-model="formInline.safeorderGocompany">
                  <el-option label="后台录入" value="1"></el-option>
                  <el-option label="用户录入" value="0"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item :required="true" label="订单状态:">
                <el-select
                  v-model="formInline.orderStateNamec"
                  placeholder="选择状态"
                  @change="getOrderValue"
                >
                  <el-option
                    v-for="(item, orderState_id) in orderStateName"
                    :label="item.orderState_name"
                    :value="item.orderState_id"
                    :key="orderState_id"
                  ></el-option>
                </el-select>
              </el-form-item>
              <div class="grid-content bg-purple">
                <el-form-item :required="true" label="是否需要赔款:">
                  <el-radio-group
                    class="peikuan"
                    v-model="formInline.safeorderNeedmoney"
                  >
                    <el-radio label="是"></el-radio>
                  </el-radio-group>
                </el-form-item>
              </div>
              <el-form-item :required="true" label="是否发短信:">
                <el-radio-group v-model="formInline.safeorderSendmessage">
                  <el-radio label="是"></el-radio>
                  <el-radio label="否"></el-radio>
                </el-radio-group>
              </el-form-item>
              <!--            <el-form-item :required=true label="特定事项:">-->
              <!--              <el-input v-model="formInline.safeorderNotice"></el-input>-->
              <!--            </el-form-item>-->
              <el-form-item :required="true" label="短信内容:">
                <el-input
                  id="userMsg"
                  resize="none"
                  :rows="8"
                  type="textarea"
                  v-model="formInline.safeorderSms"
                ></el-input>
              </el-form-item>
              <el-form-item :required="true" size="large" class="textMargin">
                <el-button type="primary" @click="textMsg">生成短信</el-button>
                <el-button type="primary" @click="sendMsg"
                  >发送给客户</el-button
                >
              </el-form-item>
              <el-form-item
                :required="true"
                label="短信内容:"
                class="driverMsg"
              >
                <el-input
                  id="driverMsg"
                  resize="none"
                  :rows="8"
                  type="textarea"
                  v-model="formInline.safeorderSmsdriver"
                ></el-input>
              </el-form-item>
              <el-form-item :required="true" size="large" class="textMargin">
                <el-button type="primary" @click="driverMsg"
                  >生成短信</el-button
                >
                <el-button type="primary" @click="sendDriverMsg"
                  >发送给客户</el-button
                >
              </el-form-item>
            </el-form>
          </el-col>
        </el-row>
      </div>
      <div class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="addmark">保 存</el-button>
      </div>
    </el-form>
  </div>
</template>
<script>
export default {
  data() {
    return {
      imgUpload: this.$api.orderManage.imgUpload,
      //formInline表单的各个值名
      labelposition: "right",
      Newcar: {
        orderType: "预约新车上牌服务"
      },
      fileListUser: [],
      dialogVisible: false,
      imageUrl: "",
      saveImg: "",
      safeorderGocompany: 0,
      formInline: {
        getarea: "",
        send: "",

        safeorderNotice: "",
        safeorderGotime: "",
        safeorderCarnumber: "",
        safeorderEngineno: "",
        safeorderUser: "",
        safeorderUserphone: "",
        safeorderRegister: "",
        safeorderGoaddress: "",
        safeorderBackaddress: "",
        safeorderUsernote: "",
        safeorderSpendtime: "",
        safeorderUserimage: "",
        safeorderCheckshop: "",
        safeorderNeedmoney: "",
        safeorderSendmessage: "",
        safeorderSms: "",
        safeorderSmsdriver: "",
        getdriverName: "",
        senddriverName: "",
        orderStateNamec: ""
      },
      //取证区域信息
      area: [],
      //还证区域
      sendarea: [],
      //检测场区域
      testarea: [],
      //根据区域获取的司机
      getdrivers: [],
      senddrives: [],
      //获取订单状态
      orderStateName: []
    };
  },
  methods: {
    //当点击保存按钮时 触发的函数事件
    cancel() {
      this.$emit("getchidval");
    },
    addmark: function() {
      this.$emit("getchidval");
      this.$axios
        .post(
          this.$api.orderManage.add, //用post链接后台对应的接口
          JSON.stringify({
            safeorderType: this.Newcar.orderType,
            safeorderGocompany: this.formInline.safeorderGocompany,
            safeorderNotice: this.formInline.safeorderNotice,
            safeorderGotime: this.formInline.safeorderGotime,
            safeorderCarnumber: this.formInline.safeorderCarnumber,
            safeorderEngineno: this.formInline.safeorderEngineno,
            safeorderUser: this.formInline.safeorderUser,
            safeorderUserphone: this.formInline.safeorderUserphone,
            safeorderRegister: this.formInline.safeorderRegister,
            safeorderGoaddress: this.formInline.safeorderGoaddress,
            safeorderBackaddress: this.formInline.safeorderBackaddress,
            safeorderUsernote: this.formInline.safeorderUsernote,
            safeorderSpendtime: this.formInline.safeorderSpendtime,
            safeorderUserimage: this.formInline.safeorderUserimage,
            driver_area: this.formInline.driver_area,
            safeorderBackdriver: this.formInline.safeorderBackdriver,
            safeorderCheckshop: this.formInline.safeorderCheckshop,
            safeorderNeedmoney: this.formInline.safeorderNeedmoney,
            safeorderSendmessage: this.formInline.safeorderSendmessage,
            safeorderSms: this.formInline.safeorderSms,
            safeorderSmsdriver: this.formInline.safeorderSmsdriver,
            safeorderStateid: this.orderState,
            safeorderImageuri: this.saveImg
          }), //将数据传给对应的数据库的值名
          {
            headers: {
              "Content-Type": "application/json"
            }
          }
        )
        .then(response => {
          console.log(response); //打印响应
          var result = response.data; //响应出来的数据复制给结果
          if (response.status === 200) {
            //当响应状态等于200时
            this.$alert("保存成功");
          } else {
            this.$alert(result.message);
          }
        })
        .catch(err => {
          this.$alert("请求出错");
          console.log(err);
        });
    },
    // cancel() {//当点击取消按钮时 触发的函数事件
    //   this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
    //     confirmButtonText: '确定',
    //     cancelButtonText: '取消',
    //     type: 'warning'
    //   }).then(() => {
    //     this.$message({
    //       type: 'success',
    //       message: '删除成功!'
    //     });
    //     this.formInline.safeorderGocompany=""
    //     this.formInline.safeorderGocompany= ''
    //     this.formInline.safeorderNotice= ''
    //     this.formInline.safeorderGotime= ''
    //     this.formInline.safeorderCarnumber= ''
    //     this.formInline.safeorderEngineno= ''
    //     this.formInline.safeorderUser= ''
    //     this.formInline.safeorderUserphone= ''
    //     this.formInline.safeorderRegister= ''
    //     this.formInline.safeorderGoaddress= ''
    //     this.formInline.safeorderBackaddress= ''
    //     this.formInline.safeorderUsernote= ''
    //     this.formInline.safeorderSpendtime= ''
    //     this.formInline.safeorderUserimage= ''
    //     this.formInline.safeorderBackdriver= ''
    //     this.formInline.safeorderCheckshop= ''
    //     this.formInline.safeorderNeedmoney= ''
    //     this.formInline.safeorderSendmessage= ''
    //     this.formInline.safeorderSms= ''
    //     this.formInline.safeorderSmsdriver= ''
    //     this.orderState=""
    //     this.orderStateNamec=""
    //   }).catch(() => {
    //     this.$message({
    //       type: 'info',
    //       message: '已取消删除'
    //     });
    //   });
    // },
    //获取上牌司机区域
    getGetarea() {
      this.$axios
        .get(this.$api.orderManage.driversarea, {
          headers: {
            "Content-Type": "application/json"
          }
        })
        .then(response => {
          if (response.data.code === "200") {
            console.log(response.data.data);
            this.area = response.data.data;
            this.sendarea = response.data.data;
          }
        })
        .catch(err => {
          this.$alert("数据异常");
          console.log(err);
        });
    },
    //获取
    //根据区域获取司机信息
    getdriver(area) {
      console.log(area);
      this.$axios
        .post(
          this.$api.orderManage.drivers,
          { area: area },
          {
            headers: {
              "Content-Type": "application/json"
            }
          }
        )
        .then(response => {
          console.log(response);
          if (response.data.code === "200") {
            this.getdrivers = response.data.data;
            alert(111);
            console.log("this.senddrives = ", this.senddrives);
          }
        })
        .catch(err => {
          this.$alert("数据异常");
          console.log(err);
        });
    },
    senddriver(val) {
      this.$axios
        .post(this.$api.orderManage.drivers, { area: val })
        .then(response => {
          console.log(response);
          if (response.data.code === "200") {
            this.senddrives = response.data.data;
            console.log(this.senddrives);
          }
        })
        .catch(err => {
          this.$alert("数据异常");
          console.log(err);
        });
    },
    //获取订单状态信息
    orderStateNameS() {
      this.$axios
        .post(this.$api.orderManage.orderstate)
        .then(response => {
          console.log("获取", response);
          if (response.data.code === "200") {
            this.orderStateName = response.data.data;
            console.log("this.orderStateName = ", this.orderStateName);
          }
        })
        .catch(err => {
          this.$alert("数据异常");
          console.log(err);
        });
    },
    getOrderValue(val) {
      this.orderState = val;
    },
    //用户短信生成按钮
    textMsg() {
      this.$message({
        message: "已成功生成短信",
        type: "success"
      });
    },
    //用户短信发送成功
    sendMsg() {
      document.getElementById("userMsg").value = "";
      this.$message({
        message: "已成功发送给用户",
        type: "success"
      });
    },
    //司机短信生成
    driverMsg() {
      this.$message({
        message: "已成功生成短信",
        type: "success"
      });
    },
    //司机短信发送
    sendDriverMsg() {
      document.getElementById("driverMsg").value = "";
      this.$message({
        message: "已成功发送给司机",
        type: "success"
      });
    },
    //用户图片上传部分的方法
    handleSuccess: function(response) {
      console.log("response = ", response);
      this.saveImg = response.fileName;
      this.imageUrl = response.data;
      console.log("this.imageUrl = ", this.imageUrl);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    }
  },
  created() {
    this.getGetarea();
    this.orderStateNameS();
  }
};
</script>

<style scoped>
.Newcar {
  border-bottom: 1px solid grey;
  padding: 10px 0;
  text-align: center;
  margin-bottom: 20px;
}
.el-input {
  width: 230px;
}
.el-select {
  width: 100px;
  margin-right: 10px;
}
.menued {
  width: 430px;
  margin-left: 30px;
}
.formed {
  text-align: left;
}
#title {
  text-align: left;
}
.dialog-footer {
  float: right;
}
.father {
  overflow: hidden;
}
.driverMsg {
  margin-top: 20px;
}
.textMargin {
  margin-left: 70px;
}
</style>
